<script setup>
import {reactive, ref} from 'vue'

let hobbies = ref([])
let user = reactive({
  username: null,
  email: null,
  password: null,
  introduce: null,
  profile: null
})
let login = () => {
  alert(hobbies.value);
  alert(JSON.stringify(user))
}
let clearx = () => {
  user.username = ''
  user.password = ''
  user.incroduce = ''
  user.profile = ''
  hobbies.value.splice(0, hobbies.value.length)
}
</script>
<template>
  <div>
    账号： <input type="text" placeholder="请输入账号！" v-model="user.username"> <br>
    密码： <input type="text" placeholder="请输入账号！" v-model="user.password"> <br>
    爱好：
    吃 <input type="checkbox" name="hbs" v-model="hbs" value="吃">
    喝 <input type="checkbox" name="hbs" v-model="hbs" value="喝">
    玩 <input type="checkbox" name="hbs" v-model="hbs" value="玩">
    乐 <input type="checkbox" name="hbs" v-model="hbs" value="乐">
    <br>
    简介:<textarea v-model="user.introduce"></textarea>
    <br>
    籍贯:
    //v-model : 双向数据绑定 表单绑定
    <select v-model="user.pro">
      <option value="1">黑</option>
      <option value="2">吉</option>
      <option value="3">辽</option>
      <option value="4">京</option>
      <option value="5">津</option>
      <option value="6">冀</option>
    </select>
    <br>
    <button @click="login()">登录</button>
    <button @click="clearx()">重置</button>
    <hr>
    显示爱好:{{ hobbies }}
    <hr>
    显示用户信息:{{ user }}
  </div>

</template>
<style scoped>

</style>